<template>
    <span @click="toggleVc">{{name}}</span>
</template>

<script>
export default {
    name: "vconsolewrap",
    props:['name'],
    data() {
        return {
            lastClickTime: 0,
            count:0
        }
    },
    methods:{
        hasClass(obj, cls) {
            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
        },
        addClass(obj, cls) {
            if (!this.hasClass(obj, cls)) obj.className += " " + cls;
        },
        toggleClass(obj,cls){
            if(this.hasClass(obj,cls)){
              this.removeClass(obj, cls);
            }else{
              this.addClass(obj, cls);
            }
        },
        removeClass(obj, cls) {
            if (this.hasClass(obj, cls)) {
              var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
              obj.className = obj.className.replace(reg, ' ');
            }
        },
        toggleVc(){
            const nowTime = new Date().getTime();
            if(nowTime - this.lastClickTime < 3000){
              this.count ++;
            } else {
              this.count = 0;
            }
            this.lastClickTime = nowTime;
            if(this.count >= 6) {
              let vconDom = document.getElementById('__vconsole');
              this.toggleClass(vconDom,'show')
              this.count = 0;
            }
        }
    },
    mounted:function(){
        
    }
};
</script>

<style>
</style>
